<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title>CustomElements Workbench</title>
    <meta charset="UTF-8">
    <script src="../custom-elements.js"></script>
    <style>
      [is=x-button] {
        border: 1px solid orange;
      }
    </style>
  </head>
  <body>
    <h3>x-button extends button</h3>
    <button is="x-button">Button</button>
    <script>
      XButton = document.register('x-button', {
        extends: 'button',
        prototype: Object.create(HTMLButtonElement.prototype, {
          readyCallback: {
            value: function() {
              this.style.backgroundColor = 'lightblue';
              console.log('x-button readyCallback');
            },
            enumerable: true
          }
        })
      });
    </script>


    <h3>x-input extends input</h3>
    <input is="x-input"></input>
    <script>
      XInput = document.register('x-input', {
        extends: 'input',
        prototype: Object.create(HTMLInputElement.prototype, {
          readyCallback: {
            value: function() {
              console.log('x-input readyCallback');
              this.placeholder = 'type some stuff here...';
              // install override for type property at instance level
              // since webkit installs these on the instance.
              Object.defineProperty(this, 'type', {
                set: function(inValue) {
                  // native change in this case is managed via attribute
                  // so we have a ghetto way of making the native behavior
                  // occur.
                  this.setAttribute('type', inValue);
                  console.log('type changed');
                },
                enumerable: true
              });
              
              /*
              // cannot override value property in this way
              // is there another way of doing this or would one need to use
              // a data observation mechanism.
              Object.defineProperty(this, 'value', {
                set: function(inValue) {
                  // native change in this case is managed via attribute
                  // so we have a ghetto way of making the native behavior
                  // occur.
                  console.log('value changed');
                },
                enumerable: true
              });
              */
              
            },
            enumerable: true
          }
        })
      });
      
      window.addEventListener('load', function() {
       xInput = document.querySelector('[is=x-input]');
       xInput.type = 'range';
       xInput.type = '';
      });
    </script>  
    
    <h3>x-select extends select</h3>
    <select is="x-select"></select>
    <script>
      XSelect = document.register('x-select', {
        extends: 'select',
        prototype: Object.create(HTMLSelectElement.prototype, {
          readyCallback: {
            value: function() {
              this.makeOptions();
            },
            enumerable: true
          },
          makeOptions: {
            value: function() {
              for (var i=0, o; i< 5; i++) {
                o = document.createElement('option');
                o.text = i;
                this.add(o);
              }  
            },
            enumerable: true
          }
        })
      });
    </script> 
    
    <h3>x-video extends video</h3>
    <video is="x-video"></video>
    <script>
      XVideo = document.register('x-video', {
        extends: 'video',
        prototype: Object.create(HTMLVideoElement.prototype, {
          readyCallback: {
            value: function() {
              this.poster = "http://www.html5rocks.com/en/tutorials/video/basics/star.png";
              this.controls = true;
              this.style.height = this.style.width = '120px';
              var source = document.createElement('source');
              source.src = 'http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4';
              source.type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
              this.appendChild(source);
            },
            enumerable: true
          }
        })
      });
    </script> 
    
    
    <h3>x-a extends a</h3>
    <a is="x-a" href="http://www.google.com">Google</a>
    <script>
      XA = document.register('x-a', {
        extends: 'a',
        prototype: Object.create(HTMLAnchorElement.prototype, {
          readyCallback: {
            value: function() {
              console.log('my href is', this.href);
            },
            enumerable: true
          }
        })
      });
    </script> 
    
    <h3>x-table extends table</h3>
    <table is="x-table">
      <tr>
        <td>0,0</td>
        <td>0,1</td>
      </tr>
    </table>
    <script>
      XA = document.register('x-table', {
        extends: 'table',
        prototype: Object.create(HTMLTableElement.prototype, {
          readyCallback: {
            value: function() {
              this.ensureStyling();
              this.addRow();
              this.addRow();
            },
            enumerable: true
          },
          addRow: {
            value: function() {
              this.appendChild(this.querySelector('tr').cloneNode(true));
            },
            enumerable: true
          },
          ensureStyling: {
            value: function() {
              var s = document.querySelector('style[x-table]');
              if (!s) {
                s = document.createElement('style');
                s.textContent = '[is=x-table] { border-collapse:collapse; } ' +
                  '[is=x-table] td { border: 1px solid black;'
                document.head.appendChild(s);
              }
            },
            enumerable: true
          }
        })
      });
    </script> 
    
    <h3>goog-img extends img</h3>
    <img is="goog-img">
    <script>
      XGoogImage = document.register('goog-img', {
        extends: 'img',
        prototype: Object.create(HTMLImageElement.prototype, {
          readyCallback: {
            value: function() {
              this.src = 'https://www.google.com/images/srpr/logo4w.png';
              this.style.width = '200px';
            },
            enumerable: true
          }
        })
      });
    </script> 
  </body>
</html>
